<template>
  <div>
    <Card>
      <tables ref="tables" :loading="loading" editable searchable search-place="top" v-model="tableData" :columns="columns" />
      <Button style="margin: 10px 0;" type="primary" @click="exportExcel">导出为Csv文件</Button>
      <div style="margin: 10px;overflow: hidden">
        <div style="float: right;">
            <Page :total="totalPage" :page-size="size" :current="1" @on-change="changePage"></Page>
        </div>
    </div>
    </Card>
    
  </div>
</template>

<script>
import Tables from "_c/tables";
import { getUsers } from "@/api/user";
export default {
  name: "tables_page",
  components: {
    Tables
  },
  data() {
    return {
      columns: [
        {
          title: "头像",
          key: "avatarUrl",
          searchable: false,
          render(h, params) {
            return h("img", {
              attrs: { src: `${params.row.extend.avatarUrl}` },
              style: { width: "50px", height: "50px" }
            });
          }
        },
        { title: "昵称", key: "nickname" },
        { title: "加入时间", key: "create_time", sortable: true }
      ],
      tableData: [],
      totalPage: 0,
      size: 10,
      loading: true,
    };
  },
  methods: {
    exportExcel() {
      this.$refs.tables.exportCsv({
        filename: `table-${new Date().valueOf()}.csv`
      });
    },
    changePage(e) {
      const page = e;
      const size = this.size;
      getUsers({ page, size }).then(res => {
      this.tableData = res.data.data.data;
      this.loading=false;
      });
    }
  },
  mounted() {
    const page = 1;
    const size = this.size;
    getUsers({ page, size }).then(res => {
      this.totalPage = res.data.data.total;
      this.tableData = res.data.data.data;
      this.loading=false;
    });
  }
};
</script>

<style>
</style>
